<script lang="ts">
	import Tab, { Icon, Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import { createEventDispatcher } from 'svelte';

	export let tabs: IObject[] = [];

	let active = {};

	const dispatch = createEventDispatcher();

	function handleTabChange(e: CustomEvent) {
		dispatch('tab:change', active);
	}
</script>

<TabBar
	class="reset-tab-color plus-indicator flex-1 max-w-1000px"
	style="--font-color: black; --reset-indicator-width: 0;"
	{tabs}
	let:tab
	bind:active
	on:SMUITabBar:activated={handleTabChange}
>
	<Tab class="tab-border" {tab} indicatorSpanOnlyContent={true}>
		<Label class="relative">
			<span>{tab.name}</span>
			{#if tab.num}
				<div
					class="font-equal z-4 rounded-0.75em flex-cc absolute -top-1em -right-1.7em min-w-1.5em w-fit h-1.5em px-2px text-xs text-transparent bg-red-500"
				>
					{tab.num}
					<span
						class="absolute block w-fit left-50% top-50% color-gray-1"
						style="transform: translate(calc(-50% + 0.6px), -50%);">{tab.num}</span
					>
				</div>
			{/if}
		</Label>
	</Tab>
</TabBar>
